<template>
    <div class="store-detail-service mb15">
        <ul class="tab">
            <li @click="tab(0)" v-bind:class="{ 'cur':isB}">保养(10)</li>
            <li @click="tab(1)" v-bind:class="{ 'cur':isA}">美容(20)</li>
        </ul>
        <div class="service" v-bind:class="{ 'hide cur':isA,'cur':isA}">
            <span class="item">
                <i class="circle circlebg-1"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-2"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-3"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-4"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-1"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-2"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-3"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-4"></i>
                <em class="name">空气滤清器更换</em>
            </span>
        </div>
        <div class="service" v-bind:class="{ 'hide cur':isB}">
            <span class="item">
                <i class="circle circlebg-1"></i>
                <em class="name">空气滤清器更换222</em>
            </span>
            <span class="item">
                <i class="circle circlebg-2"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-3"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-4"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-1"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-2"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-3"></i>
                <em class="name">空气滤清器更换</em>
            </span>
            <span class="item">
                <i class="circle circlebg-4"></i>
                <em class="name">空气滤清器更换</em>
            </span>
        </div>
    </div>
</template>
<style lang="scss" scoped>      
        @import "../../assets/css/_functions.scss";
        @import "../../assets/css/_variables.scss";
        .store-detail-service{
            background: $_fff;
            ul.tab{
                border-bottom:1px solid $_dedede;
            }
            li{
                display: inline-block;
                font-size: rem(14);
                padding:rem(11) rem(15);


            }
            li.cur{
                border-bottom:2px solid $_0299f6;
                position:relative;
                top:1px;
            }

            .service{
                padding:rem(15) rem(23) 0;
                span.item{
                    display: inline-block;
                    width: rem(60);
                    text-align:center;
                    margin:0 rem(10) rem(25);
                    font-size: rem(12);
                    height: rem(68);

                }
                em.name{
                    display:inline-block;
                    padding-top:rem(5);

                }
            }
        }
</style>
<script>
import Vue from 'vue'; 
import VueResrource from 'vue-resource';
Vue.use(VueResrource);
export default {
    data() {
        return {
            isA:false,
            isB:true
        }
    },
    methods: {
        tab: function (type) {
           this.isA = Boolean(type);
           this.isB = !this.isA;
        }
    },
    ready: function () {

        this.$http.get('api/detail/spuDetail.htm?channelType=1&spuCode=105903', {
            })
                .then(( res ) => {
                    // success
                    
                    var data = res.data;
                    
                    console.log(123)
                    sconsole.log(data)
                }, () => {
                    // error
                });
        
    }
}
</script>